<template>
  <div class="card-tab-box">
    <PubTable
      :isTabInner="true"
      :tableData="crudData"
      :uploadUrl="uploadUrl"
      @selected-items="getSelection"
    />
  </div>
</template>

<script lang="jsx" setup>
import "@/components/PubTable/style/pubTablecss.scss";
import {
  tableData as mockData,
  caserData,
} from "@/components/PubTable/utils/mockData.js";
import { ref, reactive, getCurrentInstance, onMounted, onActivated } from "vue";
let { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();
const isDetail = ref(false);
const editId = ref(null);

//全局数据配置
const crudData = ref({
  clums: [
    // {
    //   type: "selection",
    //   width: 40,
    //   label: "复选框",
    //   fixed: "left",
    // },
    {
      type: "index",
      props: "index",
      label: "序号",
      width: 80,
      fixed: "left",
    },
    {
      props: "productName",
      label: "产品名称",
      search: {
        key: "productName",
        type: "input",
        placeholder: "搜索产品名称",
        minWidth: "200px",
        clearable: true,
        maxLength: 20,
      },
    },
    {
      props: "type",
      label: "通信方式",
      minWidth: "100px",
      search: {
        key: "type",
        type: "select",
        placeholder: "通信方式",
        clearable: true,
        maxLength: 20,
        optionList: [
          {
            label: "串口",
            value: "串口",
          },
          {
            label: "BLE",
            value: "BLE",
          },
          {
            label: "2/3/4G",
            value: "2/3/4G",
          },
          {
            label: "WIFI",
            value: "WIFI",
          },
          {
            label: "NB",
            value: "NB",
          },
          {
            label: "ZigBee",
            value: "ZigBee",
          },
          {
            label: "Lora",
            value: "Lora",
          },
        ],
      },
    },
    {
      props: "baudRate",
      label: "波特率",
      minWidth: "100px",
    },
    {
      props: "updateTime",
      label: "更新时间",
      minWidth: "100px",
      search: {
        key: "updateTime",
        type: "timerange",
        startPlaceholder: "选择更新时间",
        endPlaceholder: "选择更新时间",
        separator: "至",
        clearable: true,
        maxLength: 20,
        timeFormatter: "YYYY-MM-DD HH:mm:ss",
      },
    },
    {
      props: "caozuo",
      label: "操作",
      width: 150,
      fixed: "right",
      render: (scope) => {
        return (
          <>
            <span
              class="p-table-btn p-table-btn-b"
              onClick={() => {
                let rowInfo = JSON.stringify(scope.row);

                proxy._storage.SStorage.set(
                  "pageIndex",
                  crudData.value.pager.pageIndex
                );
                proxy._storage.SStorage.set(
                  "pageSize",
                  crudData.value.pager.pageSize
                );
                console.log(567,proxy._storage.SStorage.get("pageIndex"));
                router.push({
                  path: "/productCustomDetail",
                  query: {
                    detailInfo: rowInfo,
                    id: scope.row.id,
                  },
                });
              }}
            >
              详情
            </span>
            <span
              class="p-table-btn p-table-btn-b"
              onClick={async () => {
                crudData.value.form.formName = "编辑";

                crudData.value.form.formList = crudData.value.form.formList.map(
                  (item) => {
                    item.value = scope.row[item.key] || null;
                    return item;
                  }
                );
                editId.value = scope.row.id;

                crudData.value.form.formShow = true;
              }}
            >
              编辑
            </span>
            <span
              class="p-table-btn p-table-btn-r"
              onClick={() => {
                ElMessageBox.confirm(
                  "删除后系统无法恢复，确认删除吗?",
                  "信息提示",
                  {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    customClass: "public-message-box-default",
                  }
                ).then(() => {
                  proxy
                    ._http({
                      url: "/api/product/delete",
                      type: "post",
                      isBody: true,
                      isLoading: true,
                      data: {
                        id: scope.row.id,
                      },
                    })
                    .then((res) => {
                      ElMessage.success("删除成功");
                      getTableData();
                      //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
                      crudData.value.form.formShow = false;
                    })
                    .catch((err) => {
                      //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
                      crudData.value.form.formShow = false;
                    });
                });
              }}
            >
              删除
            </span>
          </>
        );
      },
    },
  ],
  handleBtns: [
    // {
    //   text: "删除",
    //   onClick: () => {
    //     if (selectTion.length) {
    //       ElMessageBox.confirm("删除后系统无法恢复，确认删除吗?", "信息提示", {
    //         confirmButtonText: "确认",
    //         cancelButtonText: "取消",
    //         customClass: "public-message-box-default",
    //       }).then(() => {
    //         //
    //         proxy
    //     ._http({
    //       url: "/api/product/delete",
    //       type: "post",
    //       isBody: true,
    //       isLoading: true,
    //       data: queryData,
    //     })
    //     .then((res) => {
    //       ElMessage.success(
    //         crudData.value.form.formName == "添加" ? "添加成功" : "编辑成功"
    //       );
    //       getTableData();
    //       //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
    //       crudData.value.form.formShow = false;
    //     })
    //     .catch((err) => {
    //       //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
    //       crudData.value.form.formShow = false;
    //     });
    //       });
    //     } else {
    //       ElMessage.warning("请选择要删除的数据");
    //       return;
    //     }
    //   },
    // },
    {
      text: "添加",
      onClick: () => {
        crudData.value.form.formName = "添加";
        crudData.value.form.formList = crudData.value.form.formList.map(
          (item) => {
            if (item.type == "multSelect") {
              item.value = [];
            } else {
              item.value = null;
            }
            return item;
          }
        );
        crudData.value.form.formShow = true;
      },
    },
  ],
  // sortRule 默认排序规则,排序字段prop在 clums中加上sortable
  sortRule: { prop: "value3", order: "descending" }, // prop: 'value3', order: 'descending'||'ascending'
  // data 获取数据getTableData
  data: mockData,
  // pager 分页配置
  pager: {
    total: 0,
    pageIndex: 1,
    pageSize: 10,
    pagerLang: [10, 20, 50, 100],
    sizeChange: (e) => {
      // 改变每页条数
      crudData.value.pager.pageSize = e;
      crudData.value.pager.pageIndex = 1;
      getTableData();
    },
    pageIndexChange: (e) => {
      // 改变页码
      crudData.value.pager.pageIndex = e;
      getTableData();
    },
  },
  // form 弹窗配置 可自定义或直接配置
  form: {
    formName: "添加",
    formShow: false,
    formList: [
      {
        key: "productName",
        type: "input",
        label: "产品名称",
        placeholder: "请输入产品名称",
        maxLength: 20,
        validate: [
          {
            required: true,
            message: "请输入产品名称",
            trigger: "blur",
          },
        ],
      },
      {
        key: "type",
        type: "select",
        label: "通信方式",
        placeholder: "请选择通信方式",
        validate: [
          {
            required: true,
            message: "请选择通信方式",
            trigger: "change",
          },
        ],
        optionList: [
          {
            label: "串口",
            value: "串口",
          },
          {
            label: "BLE",
            value: "BLE",
          },
          {
            label: "2/3/4G",
            value: "2/3/4G",
          },
          {
            label: "WIFI",
            value: "WIFI",
          },
          {
            label: "NB",
            value: "NB",
          },
          {
            label: "ZigBee",
            value: "ZigBee",
          },
          {
            label: "Lora",
            value: "Lora",
          },
        ],
      },
      {
        key: "baudRate",
        type: "select",
        label: "波特率",
        placeholder: "请选择波特率",
        validate: [
          {
            required: true,
            message: "请选择波特率",
            trigger: "change",
          },
        ],
        // 2400、4800、9600、19200、38400、57600、115200
        optionList: [
          {
            label: "2400",
            value: "2400",
          },
          {
            label: "4800",
            value: "4800",
          },
          {
            label: "9600",
            value: "9600",
          },
          {
            label: "19200",
            value: "19200",
          },
          {
            label: "38400",
            value: "38400",
          },
          {
            label: "57600",
            value: "57600",
          },
          {
            label: "115200",
            value: "115200",
          },
        ],
      },
    ],
    handelFormShow: (name, flag) => {
      crudData.value.form.formName = name;
      crudData.value.form.formShow = flag;
    },
    handelSubmit: (data) => {
      let queryData = {
        ...data,
      };
      queryData.baudRate = Number(data.baudRate);
      if (crudData.value.form.formName != "添加") {
        queryData.id = editId.value;
      }
      proxy
        ._http({
          url: "/api/product/addOrUpdate",
          type: "post",
          isBody: true,
          isLoading: true,
          data: queryData,
        })
        .then((res) => {
          ElMessage.success(
            crudData.value.form.formName == "添加" ? "添加成功" : "编辑成功"
          );
          getTableData();
          //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
          crudData.value.form.formShow = false;
        })
        .catch((err) => {
          //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
          crudData.value.form.formShow = false;
        });
    },
  },
  //查询参数回调
  searchCb: (e) => {
    console.log("searchCb", e);
    getTableData(e);
  },
  //重置回调
  reset: (e) => {
    console.log("reset", e);
    getTableData();
  },
});

const getTableData = (e) => {
  let queryData = {
    page: crudData.value.pager.pageIndex,
    pageSize: crudData.value.pager.pageSize,
    productType: "PRI",
    productName: (e && e.productName) || null,
    type: (e && e.type) || null,
    startTime:
      e && e.updateTime && e.updateTime.length ? e.updateTime[0] : null,
    endTime: e && e.updateTime && e.updateTime.length ? e.updateTime[1] : null,
  };
  for (let item in queryData) {
    if (queryData[item] == null) {
      delete queryData[item];
    }
  }
  proxy
    ._http({
      url: "/api/product/page",
      type: "post",
      isBody: true,
      isLoading: true,
      data: queryData,
    })
    .then((res) => {
      crudData.value.data = res.records;
      crudData.value.pager.total = res.total || 0;
    })
    .catch((err) => {});
};

onMounted(() => {
  if (proxy._storage.SStorage.get("pageIndex")) {
    crudData.value.pager.pageIndex = proxy._storage.SStorage.get("pageIndex");
    crudData.value.pager.pageSize = proxy._storage.SStorage.get("pageSize");
  }
  getTableData();
});
onActivated(() => {
  getTableData();
});

const uploadUrl = ref("/api/alarmPush/import");
var selectTion = reactive([]);
const getSelection = (val) => {
  selectTion = val;
  console.log("选中", selectTion);
};
</script>

<style lang="scss" scoped></style>
